<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Prismriver-音乐灵感生成器</title>
    <link rel="icon" href="./favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./materialize/css/materialize.css">
    <link rel="stylesheet" href="./src/css/index.css">
    <link rel="stylesheet" href="./alertifyjs/css/alertify.min.css">
    <link rel="stylesheet" href="./alertifyjs/css/themes/default.min.css">
    <script src="nexus_UI/NexusUI.js"></script>
    <script src="./alertifyjs/alertify.min.js"></script>
</head>

<body>
    <div class="navbar-fixed">
        <ul id="mod-select" class="dropdown-content">
            <li><a href="#!">旋律生成</a></li>
            <!-- <li><a href="#!" class="diabled">施工中...</a></li> -->
          </ul>
        <nav>
            <div class="nav-wrapper indigo darken-3">
                <a href="#" class="brand-logo center">Prismriver</a>
                <ul id="nav-mobile" class="right">
                    <li><a class="dropdown-trigger" href="#!" data-target="mod-select">功能选择</a></li>
                    <!-- <li><a href="#!">帮助</a></li> -->
                    <li><a href="https://github.com/Fungus-Light/Prismriver">源代码</a></li>
                </ul>
            </div>
        </nav>
    </div>

    <main style="width: 95%;margin: auto;">
        <div id="rythm-gen" class="row">
            <br>

            <div class="col s4">

                <div class="col s12">

                    <br>
                    <div class="input-field col s6">
                        <select id="section_num">
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="4">4</option>
                        </select>
                        <label>小节数</label>
                    </div>
                    <div class="input-field col s6">
                        <select id="unit_time">
                            <option value="4">四分音符</option>
                            <option value="8">八分音符</option>
                        </select>
                        <label>单位时长</label>
                    </div>
                    <label>BPM</label>
                    <p class="range-field">
                        <input id="tempo_num" type="range" id="tempo" min="50" max="200" value="128" />
                    </p>

                    <div class="input-field col s12">
                        <select id="scale_type">
                            <option value="1">五声音阶</option>
                            <option value="2">自然大调</option>
                            <option value="3">自然小调</option>
                        </select>
                        <label>音阶</label>
                    </div>

                    <div class="input-field col s12">
                        <select id="range">
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                        </select>
                        <label>跨度（几个八度）</label>
                    </div>

                    <!-- <div class="input-field col s12">
                        <select>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                        </select>
                        <label>乐器</label>
                    </div> -->

                </div>

            </div>

            <div class="col s8">
                <div class="col s12">
                    <br>

                    <div class="col s12" style="overflow-x: scroll;">
                        <label>节奏(一格为一个单位音符)</label>
                        <div id="template"></div>
                    </div>

                    <div class="col s12">
                        <br>
                        <label>结果(默认C4，默认全部为C调，▂表示休止符)</label>
                        <br>
                        <div id="result">
                            
                        </div>

                    </div>

                    <div class="col s12">
                        <br>
                        <label>操作</label>
                        <br>
                        <br>
                        <a id="btn_generate" class="waves-effect waves-light blue btn">生成</a>
                        <a id="btn_player" class="waves-effect waves-light pink btn">播放</a>
                        <a id="btn_stop" class="waves-effect waves-light gray btn">停止</a>
                        <a id="btn_reload" class="waves-effect waves-light red btn">重置</a>
                        <a id="btn_export" class="waves-effect waves-light green btn">导出</a>
                    </div>

                </div>

            </div>
        </div>


    </main>
    <script src="./src/js/midi.js"></script>
    <script src="materialize/js/materialize.js"></script>
    <script src="materialize/jquery/jquery.js"></script>
    <script> M.AutoInit();</script>
    <script src="tonejs/Tone.js"></script>
    <script src="src/js/Generator.js"></script>
    <script src="./src/js/player.js"></script>
    <script src="src/js/logic.js"></script>
</body>

</html>